<template>
  <div>
    <!-- 公共的顶部导航 -->
    <AppTopnav></AppTopnav>
    <!-- 公共的吸顶头部 -->
    <AppHeaderSticky></AppHeaderSticky>
    <!-- 公共的头部 -->
    <AppHeader></AppHeader>
    <main>
      <!-- 二级路由 -->
      <router-view></router-view>
    </main>
    <!-- 公共的底部 -->
    <AppFooter></AppFooter>
  </div>
</template>
<script setup name="Layout">
// 头部导航组件
import AppTopnav from '@/components/app-topnav.vue'
// 头部组件
import AppHeader from '@/components/app-header.vue'
// 吸顶头部组件
import AppHeaderSticky from '@/components/app-header-sticky.vue'
// 底部组件
import AppFooter from '@/components/app-footer.vue'
// 获取分类数据,并修改vuex中的数据
import { useStore } from 'vuex'
const store = useStore()
store.dispatch('getCateList')
</script>

<style lang="less" scoped>
main {
  min-height: 1200px;
}
</style>